<script setup lang="ts">
import TopicCard from '@/component/TopicCard.vue'
import {ref, watch} from "vue";
import service from "@/request";
import {useBrokerStore} from '@/stores/brokerStore'

const brokerStore = useBrokerStore()

const topicName = ref<Array<{ name: string, size: number }>>([]);

const getBrokerInfo = async () => {
    const response: Map<string, string> = await service.get('/broker/topic-info',
        {params: {brokerName: brokerStore.currentBroker}})

    // 转换为 {name: string, size: number} 数组
    const formattedTopics = Object.entries(response).map(([name, size]) => ({
        name: name,
        size: parseInt(size as string, 10) // 转换为数字
    }))

    topicName.value = formattedTopics
    console.log(formattedTopics)

}

watch(
    () => brokerStore.currentBroker,
    (newBroker) => {
        if (newBroker) {
            getBrokerInfo();
        }
    },
    {immediate: true} // 立即执行一次
);
</script>

<template>
    <div>
        <div v-for="topic in topicName" :key="topic.name">
            <topic-card :topicName="topic.name" :topicSize="topic.size"></topic-card>
        </div>
    </div>
</template>

<style scoped>

</style>